<!--微信小程序配置-->
<template>
  <div id="payConfig" class="app-container">
    <div class="common-title m-b-20 p-l-10"><h2 class="bold">三方支付配置</h2></div>
    <div v-loading="loading" class="container" :element-loading-text="loadingText">
      <el-form
        ref="form"
        label-width="120px"
        class="common-form-with-desc">
        <el-alert
          title="说明："
          type="warning"
          :closable="false">
          <template>
            1.微信小程序、微信公众号、网页、APP认证主体必须是“{{ wxPay.mchEntity }}”才能使用微信支付，否则无法获取微信支付句柄！<br>
            2.微信小程序、微信公众号、网页、APP若想通过配置形式发起支付，只需在预支付接口传递appId即可，否则默认使用“application.properties”配置的应用
            ({{ wxPay.appId }}&nbsp;&nbsp;{{ wxPay.appId2 }}&nbsp;&nbsp;{{ wxPay.appId3 }})
            <br>
            3.支付渠道仅支持:
            <template>
              <span v-for="(value,key) in tradeType" :key="key" class="color-danger m-r-5">{{ value }}({{ key }})</span>
            </template><br>
            4.支付通知、转账通知、退款通知接口服务均是系统默认的，只需修改“application.properties”中“chiship.server-domain”服务主机属性即可<br>
            5. <el-link type="primary" :underline="false" @click="handleCreateOrder">支付测试</el-link><br>
            6.文档：
            <a class="color-primary" href="https://pay.weixin.qq.com/doc/v3/merchant/4012062524/" target="_blank" style="margin-right:20px">微信</a>
            <a class="color-primary" href="https://opendocs.alipay.com/open/194/105072?pathHash=45357796" target="_blank">支付宝</a>
          </template>
        </el-alert>
        <div class="common-title m-b-20">
          <h2 class="bold">微信支付(公众号、小程序、扫码付)</h2>
          <span class="options">
            <span class="color-danger">application.properties</span>文件中<span class="color-danger">chiship.pay.wx.***</span>相关配置
          </span>
        </div>
        <el-form-item label="商户主体:">{{ wxPay.mchEntity }} </el-form-item>
        <el-form-item label="商户号:">{{ wxPay.mchId }} </el-form-item>
        <el-form-item label="V3密钥:"><copy-text :content="wxPay.mchKey" position="left" /> </el-form-item>
        <el-form-item label="V3证书序列号:"><copy-text :content="wxPay.serialNumber" position="left" /> </el-form-item>
        <el-form-item label="V3证书私钥串:"><copy-text :content="wxPay.privateKey" :show="false" /> </el-form-item>
        <el-form-item label="应用号:">
          <span class="color-primary m-r-5">{{ wxPay.appId }}</span>
          <template v-if="wxPay.appId2">
            <span class="color-primary m-r-5">{{ wxPay.appId2 }}</span>
          </template>
          <template v-if="wxPay.appId3">
            <span class="color-primary m-r-5">{{ wxPay.appId3 }}</span>
          </template>
          （默认配置）
          <template v-for="(item) in applications">
            <span v-if="item.type===1 || item.type===2" :key="item.id" class="color-primary m-r-5">
              {{ item.appId }}
              ({{ item.type===1?'公众号':'小程序' }})
            </span>
          </template>
          （系统配置）
        </el-form-item>
        <el-form-item label="支付通知:">
          {{ wxPay.notifyUrl }}
          <el-link
            type="primary"
            :underline="false"
            style="margin-left:10px"
            @click="handleVerification(wxPay.notifyUrl.replace('{TRADE_TYPE}','PC'))">验证</el-link>
        </el-form-item>
        <el-form-item label="退款通知:">
          {{ wxPay.refundUrl }}
          <el-link
            type="primary"
            :underline="false"
            style="margin-left:10px"
            @click="handleVerification(wxPay.refundUrl)">验证</el-link>
        </el-form-item>
        <el-form-item label="转账通知:">
          {{ wxPay.transferUrl }}
          <el-link
            type="primary"
            :underline="false"
            style="margin-left:10px"
            @click="handleVerification(wxPay.transferUrl)">验证</el-link>
        </el-form-item>
        <div class="common-title m-b-20">
          <h2 class="bold">支付宝支付(PC、H5、扫码付)</h2>
          <span class="options">
            <span class="color-danger">application.properties</span>文件中<span class="color-danger">chiship.pay.ali.***</span>相关配置
          </span>
        </div>
        <el-form-item label="商户主体:">{{ zfbPay.mchEntity }} </el-form-item>
        <el-form-item label="应用号:">{{ zfbPay.appId }} </el-form-item>
        <el-form-item label="公钥:"><copy-text :content="zfbPay.aliPayPublicKey" :show="false" /> </el-form-item>
        <el-form-item label="私钥:"><copy-text :content="zfbPay.rsaPrivateKey" :show="false" /> </el-form-item>
        <el-form-item label="支付通知:">
          {{ zfbPay.notifyUrl }}
          <el-link
            type="primary"
            :underline="false"
            style="margin-left:10px"
            @click="handleVerification(zfbPay.notifyUrl.replace('{TRADE_TYPE}','PC'))">验证</el-link>
        </el-form-item>
        <div class="common-title m-b-20"><h2 class="bold">支付宝支付(小程序支付)</h2></div>
        <el-form-item label="商户主体:">{{ zfbPay.mchEntity }} </el-form-item>
        <el-form-item label="应用号:">{{ zfbMpPay.appId }} </el-form-item>
        <el-form-item label="公钥:"><copy-text :content="zfbMpPay.publicKey" :show="false" /> </el-form-item>
        <el-form-item label="私钥:"><copy-text :content="zfbMpPay.privateKey" :show="false" /> </el-form-item>
        <el-form-item label="支付通知:">
          {{ zfbMpPay.notifyUrl.replace('{TRADE_TYPE}','MINI_PROGRAM') }}
          <el-link
            type="primary"
            :underline="false"
            style="margin-left:10px"
            @click="handleVerification(zfbMpPay.notifyUrl.replace('{TRADE_TYPE}','MINI_PROGRAM'))">验证</el-link>
        </el-form-item>
      </el-form>
    </div>
    <pay ref="pay" title="支付配置测试支付" @payNotify="handlePayNotify" />
  </div>
</template>

<script>
import Pay from '@/views/components/pay.vue'

import axios from 'axios'
export default {
  components: { Pay },
  data() {
    return {
      applications: [],
      wxPay: {},
      zfbPay: {},
      zfbMpPay: {},
      tradeType: {},
      loading: false,
      loadingText: ''
    }
  },
  watch: {
  },
  created() {
    this.fetchApplication()
    this.getPayConfig()
  },
  methods: {
    fetchApplication() {
      this.$store.dispatch('applicationKeyConfigList').then(res => {
        this.applications = res
      })
    },
    getPayConfig() {
      this.$store.dispatch('getThirdPayConfig').then(res => {
        this.wxPay = res.wx
        this.zfbPay = res.zfb
        this.zfbMpPay = res.zfbMp
        this.tradeType = res.tradeType
      })
    },
    handleVerification(url) {
      this.loading = true
      this.loadingText = '验证中...'
      axios.post(url).then((res) => {
        this.$modal.msgSuccess('地址正常使用!')
        this.loading = false
      }).catch((_) => {
        this.loading = false
        this.$modal.msgWarning('地址不通!')
      })
    },
    handleCreateOrder() {
      this.$store.dispatch('businessCreateRechargeOrder', {
        orderName: '支付配置测试支付',
        price: 0.01
      }).then(response => {
        this.$modal.msgSuccess('订单创建成功,去支付！')
        this.handleDoPay(response)
      }).catch(() => {
      })
    },
    handleDoPay(orderId) {
      this.$nextTick(() => {
        this.$refs.pay.init(orderId)
      })
    },
    handlePayNotify(val) {
      console.log(val)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" >
#payConfig {
  background: #fff;
  .container{
    height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 0px 36px 10px 36px;
  }
}
</style>
